<template xmlns="http://www.w3.org/1999/html" xmlns:>
    <div class='router-div'>
      <form id="editform">
        <div v-for="conProp in configTable.props">
          <!--文本类型-->
          <p v-if="conProp.type=='text'">
            {{conProp.name}} <span class="star" v-if="conProp.ismust">*</span>
            <input type="text" class="inputItem" :placeholder="conProp.remark" :name="conProp.prop"/><br>
          </p>

          <!-- 整数类型-->
          <p v-if="conProp.type=='int'">
            {{conProp.name}}<span class="star" v-if="conProp.ismust">*</span>
            <input type="number" class="inputItem" :placeholder="conProp.remark" :name="conProp.prop"/><br>
          </p>

          <!-- 图片类型-->
          <p v-if="conProp.type=='img'">
            {{conProp.name}}<span class="star" v-if="conProp.ismust">*</span>
            <input type="text" :ref="conProp.prop" class="inputItem" :placeholder="conProp.remark" :name="conProp.prop"/><br>
            <el-upload
              class="upload-demo"
              ref="upload"
              :action="imgUploadUrl"
              list-type="picture"
              :auto-upload="true"
              :show-file-list="true"
              :limit="3"
              :on-success="uploadSuccess"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="fileList"
              :data="{propName:conProp.prop}">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            </el-upload>
          </p>

          <!--日期类型-->
          <p v-if="conProp.type=='date'">
            {{conProp.name}}<span class="star" v-if="conProp.ismust">*</span>
            <input type="date" class="inputItem" :name="conProp.prop"/><br>
          </p>
          <!--日期类型-->
          <p v-if="conProp.type=='datetime'">
            {{conProp.name}}<span class="star" v-if="conProp.ismust">*</span>
            <input type="datetime-local" class="inputItem" :name="conProp.prop"/><br>
          </p>

          <!--选择类型-->
          <p v-if="conProp.type=='select'">
            {{conProp.name}}<span class="star" v-if="conProp.ismust">*</span>
            <input type="button" @click="selectProp(conProp)" class="inputItem" :name="conProp.prop"/><br>
          </p>
        </div>
      </form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="onCancel">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </div>
</template>

<script>
  import common from "../../data/common"
  import data from "../../../static/js/data"
  import {onSelectedProp, event} from "../../data/bus";
  import {Toast} from "mint-ui"
  import moment from "moment"

  event.$on(onSelectedProp, function (name, value) {
    var elements = document.getElementsByName(name);
    console.log(name + "," + value + "," + elements.length)
    for (var i=0; i<elements.length; i++) {
      elements[i].value = value;
    }
  });
    export default {
      name: "edit-item",
      props:["item","configTable","copy"],
      data(){return{
        imgUploadUrl:common.apidomain + "/file/upload",
        fileList:[],
      }},
      methods:{
        uploadSuccess(response, file, fileList) {
          var propName = response.data.propName;
          var viewArray = this.$refs[propName];
          var view = viewArray[0];
          var value = response.data.fileName;

          view.value = value;
        },
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePreview(file) {
          console.log(file);
        },

        onSubmit(){
          var url = common.apidomain + "/admin/update";
          var form = {"tableName":this.configTable.tableName, "id":this.item["id"]};

          // 拷贝功能
          if (this.isCopyMode) {
            url = common.apidomain + "/admin/insert";
            form = {"tableName":this.configTable.tableName};
          }
          console.log(this.isCopyMode + ",url=" + url)
          for (var i=0; i<this.configTable.props.length; i++) {
            var prop = this.configTable.props[i];
            // 自动填写不需要用户输入
            if (prop.type == "auto") {
              continue;
            }
            var elements = document.getElementsByName(prop.prop);
            var value= null;
            for (var j=0; j<elements.length; j++) {
              var el = elements[j];
              console.log(el.name + "," + el.value);
              value=el.value;
            }

            if (this.checkValid(prop, value)) {
              form[prop.prop] = value;
            }
          }

          this.$http.post(url,form, {emulateJSON:true}).then(ret=>{
            if (ret.body.code == "0") {
              Toast("提交成功");
              this.$emit("dialogClose",false);
              this.clearView();
            } else {
              Toast(ret.body.msg);
            }
          }, ret=>{
            this.$message(ret.body.msg);
          });
        },
        // 判断输入是否有效
        checkValid(prop, value) {
          if (prop.type == 'int' || prop.type == 'select') {
            if(value==null || value.length == 0) {
              console.log(prop.name + " is empty ignored")
              return false;
            }
          }

          return true;
        },
        onCancel() {
          this.$emit("dialogClose","");
          this.clearView();
        },
        clearView() {
          console.log("edititem clearView")
          var elements = document.getElementsByClassName("inputItem");
          for (var i = 0; i < elements.length; i++) {
            elements[i].value = null;
          }
        },
        selectProp(conProp) {
          this.$emit("selectProp",conProp);
        },

        // 控件赋值
        initView(item) {
          var elements = document.getElementsByClassName("inputItem");
          console.log("created," + elements.length)
          for (var i=0; i<elements.length; i++) {
            var el = elements[i];

            if (item[el.name] != null) {
              if (el.type == "date") {
                el.value = moment(item[el.name]).format("YYYY-MM-DD");
                console.log(moment(item[el.name]).format("YYYY-MM-DD"));
              } else if (el.type == "datetime-local") {
                el.value = moment(item[el.name]).format("YYYY-MM-DDTHH:mm");
                console.log(moment(item[el.name]).format("YYYY-MM-DDTHH:mm"));
              } else {
                el.value = item[el.name];
              }
            }

            console.log(el.type + "," + el.name + "=" + el.value + ",src=" + item[el.name]);
          }
        }
      },

      watch: {
        "item":function (newval, oldval) {
          this.initView(newval)
        },
        "copy":function (newval, oldval) {
          console.log("copy changed " + newval)
          this.isCopyMode = newval;
        }
      },
      mounted() {
        this.initView(this.item)
        debugger
      }
    }
</script>

<style scoped>

  form {
  }
  p {
    margin: 5px;
    left: 0px;
  }
  input {
    width: 80%;
    height: 20px;
  }
  .star {
    color:red;
  }
</style>
